<template>
  <div class="container">
    <h2>{{title_name+title_bench}}销售统计</h2>
    <div class="buttons">
      <el-button @click="allStatistics" type="primary" style="margin-left:30px">总统计</el-button>
      <el-button @click="ViewAnnualStatistics" style="margin-left:30px">年统计</el-button>
      <el-button @click="ViewQuarterStatistics" style="margin-left:30px">季度统计</el-button>
      <el-button @click="viewMonthlyStatistics" type="primary" style="margin-left:30px">月统计</el-button>
      <el-select v-model="checkedYear" clearable placeholder="选择年份" style="margin-left:30px">
        <el-option v-for="item in year" :key="item.value" :label="item.value" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="checkedQuarter" clearable placeholder="选择季度" style="margin-left:30px">
        <el-option v-for="item in quarter" :key="item.value" :label="item.value" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="checkedMonth" clearable placeholder="选择月" style="margin-left:30px">
        <el-option v-for="item in month" :key="item.value" :label="item.value" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" border id="stationsTable" :header-cell-style="headerStyle">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="name" label="油枪号" align="center">
      </el-table-column>
      <el-table-column prop="date" label="油品" align="center">
      </el-table-column>
      <el-table-column prop="date" label="单价" align="center">
      </el-table-column>
      <el-table-column prop="date" label="升数" align="center">
      </el-table-column>
      <el-table-column prop="money" label="金额" align="center">
      </el-table-column>
      <el-table-column label="时间" align="center">
      </el-table-column>
    </el-table>
    <el-dialog title="油枪详情" :visible.sync="dialogTableVisible" width="400px">
      <el-form :model="tableData" size="small" class="from">
        <el-form-item label="油站别名" label-width="100px" style="width:100%;padding-right:0px">
          <el-input v-model="tableData.name" suffix-icon="xxxx" placeholder="请输入油站别名"></el-input>
        </el-form-item>
        <el-form-item label="油号" label-width="100px" style="width:100%;padding-right:0px">
          <el-input v-model="tableData.typeofGas" suffix-icon="xxxx" placeholder="请输入油号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="stationsForm.addStationsDataDialog = false">取 消</el-button>
        <el-button type="primary" @click="stationsForm.addStationsDataDialog = false">确 定</el-button>
      </div>

    </el-dialog>
  </div>

</template>

<script>
export default {
  name: 'EduIndex',

  data() {
    return {
      title_name: '',
      title_bench: '',
      tableData: [
        {
          id: '01',
          name: "一号加油枪",
          typeofGas: "#92",
        }, {
          id: '03',
          name: "二号加油枪",
          typeofGas: "#98",
        }, {
          id: '02',
          name: "三号加油枪",
          typeofGas: "#98",
        }],
      dialogTableVisible: false
    };
  },

  mounted() {
    this.getdetail()
  },

  methods: {
    getdetail() {
      const { bench, name } = this.$route.query
      this.title_name = name;
      this.title_bench = bench
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'warning-row';
      } else {
        return 'success-row';
      }
    },
    headerStyle() {
      return '  background: #eef9fe;'
    },
    handlesee(item, index) {
      this.dialogTableVisible = true;
      this.$set(this.dialogData, 'detail', this.tableData[index].detail)
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../../style.css";
.container {
  margin: 20px;
}
#edu-table {
  margin-top: 30px;
}
.el-form-item .el-select {
  width: 200px;
}
.el-form-item .el-input {
  width: 200px;
}
.buttons {
  float: right;
  padding-bottom: 20px;
}
</style>